<template>
	<div class="view-room-chat flex flex-direction-v">
		<div class="room-chat-header-flur"></div>
		<mt-header class="room-chat-header" fixed>
			<a @click="goBack" slot="left">
				<mt-button icon="back"></mt-button>
			</a>
			<mt-button icon="more" slot="right"></mt-button>
		</mt-header>
		<div class="video-wrap">
			<video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="true">
			</video-player>
			<div class="video-info-flur"></div>
			<div class="video-info flex">
				<div class="item-left">
					<span class="info-item room-id">房间：{{roomChatInfo.room_id}}</span>
					<span class="info-item read-num">人气：{{roomChatInfo.viewing_number}}</span>
					<span class="info-item category">类别：{{categoryListConvent[roomChatInfo.category_id]}}</span>
				</div>
				<div class="item-right flex-1">
					<i class="iconfont icon-fangda"></i>
				</div>
			</div>
		</div>
		<mt-navbar v-model="roomNavActive" class="roomChat-nav">
			<mt-tab-item id="room-chat">
				<div class="nav-title-box">
					<touch-ripple :speed="5" :opacity="0.1" color="#0ac68b" transition="ease">
						<p class="nav-title">聊天</p>
					</touch-ripple>
					<div class="nav-line"></div>
				</div>
			</mt-tab-item>
			<mt-tab-item id="room-anchor">
				<div class="nav-title-box">
					<touch-ripple :speed="5" :opacity="0.1" color="#0ac68b" transition="ease">
						<p class="nav-title">主播</p>
					</touch-ripple>
					<div class="nav-line"></div>
				</div>
			</mt-tab-item>
			<mt-tab-item id="room-high-energy">
				<div class="nav-title-box">
					<touch-ripple :speed="5" :opacity="0.1" color="#0ac68b" transition="ease">
						<p class="nav-title">高能</p>
					</touch-ripple>
					<div class="nav-line"></div>
				</div>
			</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="roomNavActive" :swipeable="true" class="roomChat-nav-container flex-1">
			<mt-tab-container-item id="room-chat">
				<div class="chat-list">
					<div v-for="item,index in messageList" :keys="item.userId" class="item" @click="readMessageUser(item)">
						<span v-if="item.userName === userInfo.user_name" class="userName my-name">{{item.userName}}:</span>
						<span v-else class="userName">{{item.userName}}:</span>
						<span class="content">{{item.message}}</span>
					</div>
				</div>
				<div class="chat-sendBox flex">
					<mt-field placeholder="发个弹幕呗~" v-model="newMessage">
						<mt-button @click="sendGroupMessage" class="sendGroupMessage-btn" size="small">
							<i class="iconfont icon-youjiantou"></i></mt-button>
					</mt-field>
				</div>
				<div ref="readMsgUserDialogBody" v-show="readMsgUserDialogShow">
					<div class="close-btn" @click="readMessageUserClose">
						<i class="iconfont icon-shanchu"></i>
					</div>
					<div class="msg-user-info">
						<div class="head-portrait-box">
							<img class="head-portrait" :src="messageUser.headPortrait" />
						</div>
						<h5 class="user-name">{{messageUser.userName}}</h5>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="room-anchor" class="flex flex-direction-v flex-center-vh">
				2
			</mt-tab-container-item>
			<mt-tab-container-item id="room-high-energy" class="flex flex-direction-v flex-center-vh">
				3
			</mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';
	import _sessionUser from '@/util/SessionUser';
	import 'video.js/dist/video-js.css';
	import { videoPlayer } from 'vue-video-player';
	import { touchRipple } from 'vue-touch-ripple';
	import 'vue-touch-ripple/dist/vue-touch-ripple.css';

	export default {
		name: 'RoomChat',
		data() {
			return {
				roomNavActive: 'room-chat',
				roomChatInfo: {},
				messageList: [],
				messageUser: {
					headPortrait: './static/img/user/head-portrait.png',
					userName: ''
				},
				newMessage: '',
				readMsgUserDialogShow: false,
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: "video/mp4",
						src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
					}],
					poster: '',
				},
				categoryListConvent: {}
			}
		},
		created() {
			let vm = this;
			_sessionUser.loadPage({
				scope: vm,
				exp: vm.userInfo && vm.categoryList,
				success: function() {
					vm.roomChatInfo = JSON.parse(sessionStorage.getItem('roomChatInfo'));
					vm.playerOptions.poster = vm.roomChatInfo.cover;
					vm.categoryList.forEach(function(value, index) {
						vm.categoryListConvent[value.id] = value.name;
					});
					vm.$socket.on('receiveGroupMessage', (data) => {
						if(vm.roomChatInfo.room_id === data.roomId) {
							vm.messageList.push(data);
						}
					});
				}
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				categoryList: state => state.liveCategory.categoryList
			}),
		},
		components: {
			videoPlayer,
			touchRipple
		},
		beforeDestroy() {
			let vm = this;
			layer.closeAll();
		},
		methods: {
			goBack() {
				let vm = this;
				util.goBack(vm);
			},
			goPage(page) {
				let vm = this;
				util.goPage(vm, page);
			},
			sendGroupMessage() {
				let vm = this;
				vm.$socket.emit('sendGroupMessage', {
					userName: vm.userInfo.user_name,
					message: vm.newMessage,
					userId: vm.userInfo.id,
					roomId: vm.roomChatInfo.room_id,
				});
				vm.newMessage = '';
			},
			readMessageUser(row) {
				let vm = this;

				if(vm.userInfo.user_name === row.userName) {
					vm.$toast({
						message: '熊猫直播：这是你自己哦',
						position: 'bottom',
						duration: 1000
					});
					return;
				}
				vm.messageUser.userName = row.userName;
				setTimeout(function() {
					layer.open({
						type: 1,
						className: 'readMsgUser-dialog',
						content: '',
						btn: '发私信',
						yes: function(index) {
							layer.close(index);
							vm.$router.push({
								path: 'privateChat',
								query: {
									toUserId: row.userId,
									toUserName: row.userName
								}
							});
						}
					});
					document.querySelector('.readMsgUser-dialog .layui-m-layercont')
						.appendChild(vm.$refs.readMsgUserDialogBody);
					vm.readMsgUserDialogShow = true;
				}, 0)
			},
			readMessageUserClose() {
				let vm = this;
				layer.closeAll();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-room-chat {
		background-color: #f5f5f5;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		.chat-list {
			padding-top: 5px;
			.item {
				padding: 7px 15px 0;
			}
			.userName {
				color: #2da984;
				&.my-name {
					color: #e17e55;
				}
			}
			.content {
				padding-left: 1px;
				color: #2b2b2b;
				word-break: break-all;
			}
		}
		.chat-sendBox {
			position: fixed;
			bottom: 0;
			width: 100%;
			border-top: 1px solid #F2F2F2;
			.mint-cell {
				background-color: #f8f8f8 !important;
			}
			.sendGroupMessage-btn {
				background-color: white;
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
				border: 1px solid #f2f2f2;
				box-shadow: 0 0 1px #f2f2f2;
				.icon-youjiantou {
					color: #cecece;
				}
			}
		}
	}
</style>

<style lang="scss">
	.view-room-chat {
		.room-chat-header-flur {
			position: fixed;
			width: 100%;
			height: 40px;
			filter: blur(10px);
			background-color: rgba(0, 0, 0, .4);
			z-index: 1;
		}
		.room-chat-header {
			background-color: transparent;
			z-index: 5;
		}
		.video-wrap {
			position: relative;
			.video-info-flur {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 40px;
				filter: blur(10px);
				background-color: rgba(0, 0, 0, .4);
				z-index: 1;
			}
		}
		.video-info {
			position: absolute;
			bottom: 15px;
			width: 100%;
			height: 40px;
			color: white;
			font-size: 10px;
			z-index: 5;
			.item-left {
				width: 80%;
				padding: 27px 0 0 15px;
				.info-item {
					display: inline-block;
					width: 30%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.item-right {
				position: relative;
				.icon-fangda {
					position: absolute;
					right: 15px;
					bottom: -7px;
					font-size: 24px;
				}
			}
		}
		.video-player {
			width: 100%;
			height: 240px;
			.video-js {
				width: 100%;
				height: 240px;
			}
			.vjs-poster {
				background-size: cover;
			}
			.vjs-big-play-button {
				width: 50px;
				height: 50px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -25px;
				margin-top: -25px;
				border-radius: 50%;
			}
		}
		.roomChat-nav-container {
			.mint-tab-container-wrap {
				height: 100%;
			}
			.mint-tab-container-item {
				height: 100%;
			}
		}
		.roomChat-nav {
			display: block;
			.v-touch-ripple {
				overflow: hidden;
				border-radius: 50%;
			}
			.mint-tab-item {
				display: inline-block;
				width: 70px;
				padding: 0;
			}
			.mint-tab-item.is-selected {
				border-bottom: none !important;
				color: #0ac68b !important;
				.nav-line {
					visibility: visible;
				}
			}
			.mint-tab-item-label {}
			.nav-title-box {
				margin: 0 auto;
				.nav-title {
					font-size: 14px;
					padding: 13px 6px;
					border-radius: 50%;
				}
				.nav-line {
					position: relative;
					top: -4px;
					width: 28px;
					margin: 0 auto;
					visibility: hidden;
					height: 3px;
					background-color: #0ac68b;
					border-radius: 3px;
				}
			}
		}
		.mint-cell {
			width: 100%;
		}
		.mint-field-core {
			padding: 0 1px 0 15px;
			margin: 0 !important;
			line-height: 2;
			border: 1px solid #f2f2f2;
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
		}
	}
	
	.readMsgUser-dialog {
		width: 300px;
		color: #a0a0a0;
		position: relative;
		.close-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			.icon-shanchu {
				font-size: 14px;
			}
		}
		.layui-m-layercont {
			padding: 30px 20px 20px;
		}
		.layui-m-layerbtn {
			background-color: #ffffff;
			border-top: 1px solid #ededed;
			span[yes] {
				color: #a0a0a0;
			}
		}
		.msg-user-info {
			.head-portrait-box {
				text-align: center;
				.head-portrait {
					width: 50px;
					height: 50px;
					object-fit: cover;
					border-radius: 50%;
				}
			}
			.user-name {
				font-size: 16px;
				text-align: center;
				color: #3e3e3e;
			}
		}
	}
</style>